<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <div style="width: 400px;margin: 100px auto;">
      <div class="mb-3">
        <label for="username" class="form-label">用户名</label>
        <input type="text" class="form-control" id="username">
      </div>
      <div class="mb-3">
        <label for="password" class="form-label">密码</label>
        <input type="password" class="form-control" id="password" onchange="handChange()">
      </div>

      <div class="mb-3">
        <input type="checkbox" id="checkbox" />
        <label>记住密码</label>
      </div>

      <button type="button" class="btn btn-primary" style="width: 100%;" onclick="login()">确定</button>
    </div>
    
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>


  <!-- 用cdn的方式进行引入crypto-js -->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/crypto-js@4.0.0/crypto-js.min.js"></script>

  <script>
    // Token，通常指代 JSON Web Token (JWT)，是一种开放标准（RFC 7519），它定义了一种紧凑且自包含的方式，可以使用密钥对信息进行数字签名，用于在各方之间安全地将信息作为 JSON 对象传输。在 Node.js 中，JWT 常用于实现无状态的身份验证，即每次请求都携带 Token，服务器不再需要在服务端存储会话信息。

    // token就是一个用来验证用户身份的令牌

    // 由后端生成，当前端登录，并且登录信息没问题的时候生成
    // 在后端给前端返回登录成功的时候一起带过去
    // 前端接受到登录成功的时候，将token存到本地存储(localStorage)中
    // 前端在除了登录以外的所有接口请求的时候，都带上token。一般都在请求的请求头上带过去
    // 后端接受到以后，可以对token进行解密
    // 当解密的时候，出现了错误，或者过期，要向前端返回
    // 前端如果接受到错误，应该提醒并且要求重新登录

    // 防止用户没有登录，直接修改url进入到列表页
    // 防止用户伪造token，进行数据查看
    // 做自动登录
    // 有过期时间，防止用户长时间离开的情况，被操作数据



    // 对于前端来说
    // 只需要登录成功的时候，将token存到localStorage
    // 所有接口在访问的时候，都将token携带到请求头
    // 每次接受到token错误或者过期，都要让重新登录
    

    // 表示刚开始就是记住密码的
    let done = true;
    
    const checkHasMember = () => {
      if (localStorage.getItem("username")) {
        const name = localStorage.getItem("username");
        const pw = localStorage.getItem("password");
        document.querySelector("#username").value = name;
        document.querySelector("#password").value = pw;
        document.querySelector("#checkbox").checked = true;
        done = true;
      } else {
        done = false;
      }
    }
    checkHasMember()
    

    const handChange = () => {
      done = false;
    }


    // 点击登录按钮
    const login = () => {
      const username = document.querySelector("#username").value;
      let password = document.querySelector("#password").value;

      if (!done) {
        // hashedPassword表示加完密的密码
        password = CryptoJS.SHA256(password).toString();
      }
      
      
      if (!username || !password) {
        alert("用户名和密码不能为空11111111111111");
        return;
      }

      fetch("http://127.0.0.1:3000/admins/login", {
        method: "POST",
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({username, password: password})
      }).then(response => response.json())
      .then(res => {
        if (res.success) {

          // 记住密码的逻辑要写在这里
          const checked = document.querySelector("#checkbox").checked
          if (checked) {
            localStorage.setItem("username", username)
            localStorage.setItem("password", password)
          } else {
            localStorage.removeItem("username")
            localStorage.removeItem("password")
          }
          



          // 跳转到列表页
          alert(res.message);

          localStorage.setItem("token", res.token);

          location.href = "./index.html";
          // console.log(res);
          

        } else {
          alert(res.message);
        }
      })
    }
  </script>
</body>
</html>
